<template>
    <div style="height: 100%">
<!--        通过路由直接进来的情况：显示无题目-->
        <a-result v-if="$store.state.exercise.paper_que_list.length===0" status="warning" title="无题目">
            <template #extra>
                <a-button key="console" type="primary" @click="()=>$router.push('/space/exercise')">
                    前去选题
                </a-button>
            </template>
        </a-result>
<!--        正常进入显示题-->
        <a-row v-if="$store.state.exercise.paper_que_list.length>0" style="height: 100%; overflow: auto; padding-top: 3%" >
            <a-col :offset="1" :span="22" style="text-align: left">
                <div v-for="(item,index)  in $store.state.exercise.paper_que_list" v-bind:key="item.queId" style="box-shadow: -3px 2px 7px 2px rgba(0,0,0,0.3); margin-bottom: 3%; padding-bottom:2%">
    <!--                题目行-->
                    <a-row>
                        <a-col offset="1" style="margin-top: 1%;">
                            <span style="color: #B0C5EA; margin-right: 1%">{{index+1}}、</span>
                                <a-tag v-if="item.level===3" color="red">
                                    困难题
                                </a-tag>
                                <a-tag v-if="item.level===1" color="green">
                                    简单题
                                </a-tag>
                                <a-tag v-if="item.level===2" color="blue">
                                    中等题
                                </a-tag>
                            <div v-html="item.content"/>
                            <span style="font-size: 1.3em">
                                <a-icon v-if="item.hasCol === undefined" theme="twoTone" type="star" two-tone-color="#e8e8e8" @click="collectionRecord(item.queId)"/>
                                <a-icon v-if="item.hasCol === true" theme="filled" type="star" style="color: #fadb14" />
                            </span>
                            <a-button v-if="isCommited===true" style="margin-left: 2%" @click="lookRes(item.queId)">查看解析</a-button>
                        </a-col>

                    </a-row>
    <!--                答案行-->
                    <a-row style="margin-top: 1%" >
                        <a-col :offset="1" :span="23">
                        <!-- 选择题的答案类型 -->
                            <a-row v-if="item.type.search('选')>=0||item.type.search('判')>=0">
                                <a-col :span="24" style="height: 100%">
                                    <a-checkbox-group v-model="item.myAns" style="width: 80%; height: 100%" >
                                        <a-row v-bind:key="ansIndex" v-for="(ansItem,ansIndex)  in item.answer" style="margin-bottom: 1%; height: 100%">
    <!--                                            答案框-->
                                            <a-radio-button style="width: 100%; height: 100%" v-if="isCommited === false">
                                                <a-checkbox :value="ansItem.content"  style="width: 100%; height: 100%">
                                                    <div v-html="ansItem.content"/>
                                                </a-checkbox>
                                            </a-radio-button>
    <!--                                            正确框-->
                                            <a-radio-button class="success" v-if="item.myAns.indexOf(ansItem.content)>=0 && ansItem.right===true && isCommited===true" :value="ansItem.content"  >
                                                <a-checkbox :value="ansItem.content" style="width: 100%">
                                                    <div v-html="ansItem.content"/>
                                                </a-checkbox>
                                            </a-radio-button>
    <!--                                            错误框-->
                                            <a-radio-button class="error"  v-if="item.myAns.indexOf(ansItem.content)>=0 && ansItem.right===false && isCommited===true" :value="ansItem.content">
                                                <a-checkbox :value="ansItem.content" style="width: 100%">
                                                    <div v-html="ansItem.content"/>
                                                </a-checkbox>
                                            </a-radio-button>
    <!--                                            未选框-->
                                            <a-radio-button class="nochoose" v-if="item.myAns.indexOf(ansItem.content)<0 && ansItem.right===true  && isCommited===true" :value="ansItem.content">
                                                <a-checkbox :value="ansItem.content" style="width: 100%">
                                                    <div v-html="ansItem.content"/>
                                                </a-checkbox>
                                            </a-radio-button>
                                        </a-row>
                                    </a-checkbox-group>
                                </a-col>
                            </a-row>
                        <!-- 填空题的答案类型 -->
                            <a-row v-if="item.type.search('填')>=0" >
    <!--                            答案框-->
                                <div v-if="isCommited===false">
                                    <div v-bind:key="ansItem.content" v-for="(ansItem,ansIndex) in item.answer">
                                        <a-input placeholder='答题区' v-model="item.myAns[ansIndex]" style="margin-bottom: 1%; width: 80%"/>
                                    </div>
                                </div>
    <!--                            判题结果区-->
                                <div v-if="isCommited===true">
                                    <div v-bind:key="ansItem.content" v-for="(ansItem,ansIndex) in item.answer">
    <!--                                    正确-->
                                        <a-input v-if="item.myAns.indexOf(ansItem.content)>=0 && ansItem.right===true" class="success"  placeholder='答题区' v-model="item.myAns[ansIndex]" style="margin-bottom: 1%; width: 80%"/>
    <!--                                    错误-->
                                        <a-input v-if="item.myAns.indexOf(ansItem.content)<0" class="error"  placeholder='答题区' v-model="item.myAns[ansIndex]" style="margin-bottom: 1%; width: 80%"/>
                                    </div>
                                </div>
                            </a-row>
                            <a-row v-if="item.type.search('答')>=0" >
    <!--                            答题区-->
                                <a-textarea v-if="isCommited===false"  placeholder="答题区" v-model="item.myAns[0]" style="margin-bottom: 1%; width: 80%"/>
    <!--                            无法判断-->
                                <a-textarea v-if="isCommited===true" disabled placeholder="答题区" v-model="item.myAns[0]" style="margin-bottom: 1%; width: 80%"/>
    <!--                            正确-->
<!--                                <a-textarea v-if="isCommited===true && item.myAns.indexOf(item.answer[0].content)>=0 && item.answer[0].right===true" class="success" placeholder="答题区" v-model="item.myAns[0]" style="margin-bottom: 1%; width: 80%"/>-->
    <!--                            错误-->
<!--                                <a-textarea v-if="isCommited===true && item.myAns.indexOf(item.answer[0].content)<0" class="error" placeholder="答题区" v-model="item.myAns[0]" style="margin-bottom: 1%; width: 80%"/>-->
                            </a-row>
                        </a-col>
                    </a-row>
                </div>
    <!--            提交框和返回框-->
                <div style="text-align: center; margin-bottom: 3%">
                    <a-button  v-if="isCommited===false" type="primary" @click="submitPaper">提交练习</a-button>
                    <a-button  v-if="isCommited===true" @click="$router.push('/space/exercise')">返回练习</a-button>
                </div>
            </a-col>
    <!--        答案解析框-->
            <a-modal v-model="ansModal" title="答案解析" @ok="ansModal=false">
                    <p><b>知识点</b></p>
                    <div style="margin-left: 2%"><div v-html="nowAnswer.point"/></div>
                    <p><b>答案</b></p>
                    <div style="margin-left: 2%" v-for="(item,index) in nowAnswer.answer" v-bind:key="index"><div v-html="item.content"/></div>
                    <p><b>解析</b></p>
                    <div style="margin-left: 2%"><div v-html="nowAnswer.analysis"/></div>
                </a-modal>
        </a-row>

    </div>
</template>

<script>

    export default {
        name: "doexercise",
        data(){
            return{
                isCommited:false,
                ansModal:false,
                nowAnswer:{
                    analysis:'',
                    point:'',
                    answer:[]
                }
            }
        },
        methods:{
            collectionRecord(queId){
                this.$store.state.exercise.paper_que_list.forEach((item,index)=>{
                    if(item.queId === queId) {
                        const newItem = item;
                        item.hasCol = true;
                        this.$store.state.exercise.paper_que_list.splice(index, 1, newItem)
                        const reqData = {
                            // questionIdList:
                            // queRecType://2历史1错误3收藏
                            token:this.$store.state.login.token,
                            studentId:this.$store.state.login.student_id
                        }
                        this.$store.dispatch('exercise/addRecord', {...reqData,questionIdList:[queId],queRecType:3}).catch(()=>{
                            this.$message.error("网络异常")
                        })
                    }
                })
            },
            submitPaper(){
                const rightList = []; //正确列表
                const errorList =[]; //错误列表
                this.isCommited = true;
                const queList = this.$store.state.exercise.paper_que_list;
                queList.forEach(item=>{
                    const rightAnswer = [];
                    const myAns = [];
                    item.answer.forEach(ansItem=>{
                        if(ansItem.right===true){
                            rightAnswer.unshift(ansItem.content)
                        }
                    })
                    item.myAns.forEach(myansItem=>{
                        if(myansItem!==undefined){
                            myAns.unshift(myansItem)
                        }
                    })

                    myAns.sort((a,b)=>(a-b))
                    rightAnswer.sort((a,b)=>(a-b))
                    if(String(myAns)!==String(rightAnswer)){
                        errorList.unshift(item.queId)
                    }else{
                        rightList.unshift(item.queId)
                    }
                })
                const reqData = {
                    // questionIdList:
                    // queRecType://2历史1错误3收藏
                    token:this.$store.state.login.token,
                    studentId:this.$store.state.login.student_id
                }
                //历史记录对题
                this.$store.dispatch('exercise/addRecord', {...reqData,questionIdList:rightList,queRecType:2,right:true}).catch(()=>{
                    this.$message.error("网络异常")
                })
                //错题
                this.$store.dispatch('exercise/addRecord', {...reqData,questionIdList:errorList,queRecType:1,right:false}).catch(()=>{
                    this.$message.error("网络异常")
                })
                //历史记录错题
                this.$store.dispatch('exercise/addRecord', {...reqData,questionIdList:errorList,queRecType:2,right:false}).catch(()=>{
                    this.$message.error("网络异常")
                })
            },
            lookRes(queId){
                const queList = this.$store.state.exercise.paper_que_list
                queList.forEach(item=>{
                    if(item.queId === queId){
                        this.nowAnswer.analysis= item.analysis;
                        this.nowAnswer.point=item.point;
                        this.nowAnswer.answer=[]
                        item.answer.forEach(ansItem=>{
                            if(ansItem.right===true){
                                this.nowAnswer.answer.push(ansItem)
                            }
                        })
                    }
                })
                this.ansModal = true;
            }
        }
    }
</script>

<style scoped>

    .success{
        width: 100%; border-color: #b7eb8f; background-color: #f6ffed; color: #52c41a;
    }
    .error{
        width: 100%; border-color: #ffa39e; background-color: #fff1f0; color: #f5222d;
    }
    .nochoose{
        width: 100%; border-color: #91d5ff; background-color: #e6f7ff; color: #1890ff;
    }
</style>